<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%layout("/WEB-INF/view/common/inc/admin_head.html",{title:'资源添加', styles:'bootstrap,font-awesome,animate,style,dtvalidate,layer,layui,bootstrap-table'}){%>
    <style type="text/css">
        body{padding-top:10px;}
        .hiddenDetailInfo{display:none;}
    </style>
    <%}%>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>绩效考核目标设定</h5>
                </div>
                <div class="ibox-content">
                    <p>基本信息：</p>
                    <ul>
                        <li>${user.userRealname}</li>
                        <li>${powerGroup.groupName}</li>
                        <li>${performanceDate}</li>
                    </ul>

                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12" >
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>关键绩效指标KPI</h5>
                    <button  class="layui-btn layui-btn-normal layui-btn-sm" style="margin-top: -8px;margin-left: 10px;" id="add-kpi-btn"  >
                        <i class="fa fa-check" aria-hidden="true"></i> 添加KPI
                    </button>
                </div>

                <div class="ibox-content">
                    <input type="hidden" id="performanceId" name="performanceId" value="${performanceId}">
                    <!-- START 数据表格 -->
                    <table id="portTable"
                           data-toolbar="#toolbar"
                           data-side-pagination="server"
                           data-pagination="true"
                           data-resizable="true"
                           data-url="/sea/human/performanceDetail/findKPIByPerformanceId.do?performanceId=${performanceId}&flag=0"
                           data-page-size="15"
                           class="table table-striped table-hover"
                    >
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>关键绩效指标OKR</h5>
                    <button  class="layui-btn layui-btn-normal layui-btn-sm" style="margin-top: -8px;margin-left: 10px;" id="add-okr-btn"  >
                        <i class="fa fa-check" aria-hidden="true"></i> 添加OKR
                    </button>
                </div>

                <div class="ibox-content">
                    <!-- START 数据表格 -->
                    <table id="okrTable"
                           data-toolbar="#toolbar"
                           data-side-pagination="server"
                           data-pagination="true"
                           data-resizable="true"
                           data-url="/sea/human/performanceDetail/findOKRByPerformanceId.do?performanceId=${performanceId}&flag=1"
                           data-page-size="15"
                           class="table table-striped table-hover"
                    >
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>企业文化</h5>
                </div>
                <div class="ibox-content">
                    <!-- START 数据表格 -->
                    <table id="cultureTable"
                           data-toolbar="#toolbar"
                           data-side-pagination="server"
                           data-pagination="true"
                           data-resizable="true"
                           data-url="/sea/human/performanceDetail/findCultureByPerformanceId.do?performanceId=${performanceId}&flag=2"
                           data-page-size="15"
                           class="table table-striped table-hover"
                    >
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="hr-line-dashed"></div>
    <div class="form-group">
        <div class="col-sm-6 col-sm-offset-5">
            <button class="btn btn-danger return-btn" >返回</button>
        </div>
    </div>
</div>

<!-- END 内容部分 -->

<!-- START 公共脚本 -->
<%layout("/WEB-INF/view/common/inc/admin_js.html",{modules:'jquery,bootstrap,bootstrap-table,dtvalidate,dtvalidate-lang-zh_cn,laydate,layer,chosen,chosen-demo'}){}%>
<!-- END 公共脚本 -->
<script>
    var $portTable = $('#portTable');
    var $okrTable=$("#okrTable");
    var $cultureTable=$("#cultureTable");
    $(function(){
        //START 表格配置
        $okrTable.bootstrapTable({
            paginationDetailHAlign:' hiddenDetailInfo',
            columns: [
                {
                    title: '绩效目标',
                    field: 'performanceTask',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '目标值',
                    field: 'performanceTarget',
                    align: 'center',
                    valign: 'middle'
                },

                {
                    title: '权重',
                    field: 'performanceWeight',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '考核办法',
                    field: 'performanceCheck',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '数据来源',
                    field: 'performanceSource',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field:  'operate',
                    title:  '操作',
                    width:  200,
                    align:  'center',
                    valign: 'middle',
                    formatter: optFormatter2
                }
            ],
            onLoadSuccess : function(){
                //新增
                $('.edit-okr-btn').on('click',function(){//新增
                    var id=$(this).attr("data-val");
                    layer.open({
                        title: '关键绩效指标OKR',
                        type: 2,
                        area: ['800px','500px'],
                        skin: 'layer-ext-espresso',
                        content: ['/sea/human/performanceDetail/editOKR.do?id='+id, 'yes']
                    });
                });


                $('.del-okr-btn').on('click',function(){
                    var delid = $(this).attr('data-val'),delname = $(this).attr('data-val-name');
                    layer.confirm('确定要删除当前？', {
                        btn: ['确定','取消'],title:'提示'
                    }, function(){
                        var index = layer.load();
                        $.post('/sea/human/performanceDetail/delete.do',{id: delid},function(data){
                            if( data.ok ){
                                layer.close(index);
                                layer.msg(data.msg,{icon: 1,time: 1500},function(){
                                    //刷新页面
                                    $portTable.bootstrapTable('refresh');
                                });
                            }else{
                                layer.msg(data.msg,{icon: 0,time: 1500});
                                layer.close(index);
                            }
                        });
                    });
                });
            }
        });




        //START 表格配置
        $portTable.bootstrapTable({
            paginationDetailHAlign:' hiddenDetailInfo',
            columns: [
                {
                    title: '绩效目标',
                    field: 'performanceTask',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '目标值',
                    field: 'performanceTarget',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '指标计算公式',
                    field: 'performanceDefine',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '权重',
                    field: 'performanceWeight',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '考核办法',
                    field: 'performanceCheck',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '数据来源',
                    field: 'performanceSource',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field:  'operate',
                    title:  '操作',
                    width:  200,
                    align:  'center',
                    valign: 'middle',
                    formatter: optFormatter
                }
            ],
            onLoadSuccess : function(){
                $('.edit-kpi-btn').on('click',function(){//新增
                    var id=$(this).attr("data-val");
                    layer.open({
                        title: '关键绩效指标KPI',
                        type: 2,
                        area: ['800px','500px'],
                        skin: 'layer-ext-espresso',
                        content: ['/sea/human/performanceDetail/editKPI.do?id='+id, 'yes']
                    });
                });

                $('.del-kpi-btn').on('click',function(){
                    var delid = $(this).attr('data-val'),delname = $(this).attr('data-val-name');
                    layer.confirm('确定要删除当前？', {
                        btn: ['确定','取消'],title:'提示'
                    }, function(){
                        var index = layer.load();
                        $.post('/sea/human/performanceDetail/delete.do',{id: delid},function(data){
                            if( data.ok ){
                                layer.close(index);
                                layer.msg(data.msg,{icon: 1,time: 1500},function(){
                                    //刷新页面
                                    $portTable.bootstrapTable('refresh');
                                });
                            }else{
                                layer.msg(data.msg,{icon: 0,time: 1500});
                                layer.close(index);
                            }
                        });
                    });
                });
            }
        });
    });


    //START 表格配置
    $cultureTable.bootstrapTable({
        paginationDetailHAlign:' hiddenDetailInfo',
        columns: [
            {
                title: '绩效目标',
                field: 'performanceTask',
                align: 'center',
                valign: 'middle'
            },
            {
                title: '考核办法',
                field: 'performanceCheck',
                align: 'center',
                valign: 'middle'
            },
            {
                title: '权重',
                field: 'performanceWeight',
                align: 'center',
                valign: 'middle'
            },
            {
                title: '数据来源',
                field: 'performanceSource',
                align: 'center',
                valign: 'middle'
            },
            {
                field:  'operate',
                title:  '操作',
                width:  200,
                align:  'center',
                valign: 'middle',
                formatter: optFormatter3
            }
        ],
        onLoadSuccess : function(){
            $('.edit-culture-btn').on('click',function(){//新增
                var id=$(this).attr("data-val");
                layer.open({
                    title: '关键绩效指标KPI',
                    type: 2,
                    area: ['800px','500px'],
                    skin: 'layer-ext-espresso',
                    content: ['/sea/human/performanceDetail/editCulture.do?id='+id, 'yes']
                });
            });

        }
    });

    //操作菜单
    function optFormatter(value,row){
        var content = '<button class="edit-kpi-btn btn btn-xs btn-info" data-val="' + row.id + '" title="修改"><i class="fa fa-edit"></i> 修改KPI</button>';
        content += '&nbsp;<button class="del-kpi-btn btn btn-xs btn-danger" data-val="'+row.id+'" title="删除"><i class="fa fa-trash-o"></i> 删除</button>';
        return content;
    }

    //操作菜单
    function optFormatter2(value,row){
        var content = '<button class="edit-okr-btn btn btn-xs btn-info" data-val="' + row.id + '" title="修改"><i class="fa fa-edit"></i> 修改OKR</button>';
        content += '&nbsp;<button class="del-okr-btn btn btn-xs btn-danger" data-val="'+row.id+'" title="删除"><i class="fa fa-trash-o"></i> 删除</button>';
        return content;
    }
    //操作菜单
    function optFormatter3(value,row){
        var content = '<button class="edit-culture-btn btn btn-xs btn-info" data-val="' + row.id + '" title="修改"><i class="fa fa-edit"></i> 修改</button>';
        return content;
    }

    //新增
    $('#add-kpi-btn').on('click',function(){//新增
        var performanceId=$("#performanceId").val();
        layer.open({
            title: '关键绩效指标KPI',
            type: 2,
            area: ['800px','500px'],
            skin: 'layer-ext-espresso',
            content: ['/sea/human/performanceDetail/addKPI.do?performanceId='+performanceId, 'yes']
        });
    });
    //新增
    $('#add-okr-btn').on('click',function(){//新增
        var performanceId=$("#performanceId").val();
        layer.open({
            title: '关键绩效指标OKR',
            type: 2,
            area: ['800px','500px'],
            skin: 'layer-ext-espresso',
            content: ['/sea/human/performanceDetail/addOKR.do?performanceId='+performanceId, 'yes']
        });
    });

    $('.return-btn').on('click',function(){
        parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭弹窗
    });

</script>
</body>
</html>